<template>
    <div>
        <!--轮播-->
        <van-swipe :autoplay="3000"
                   indicator-color="white" v-if="ads['pos-1']">
            <van-swipe-item v-for="(banner, index) in ads['pos-1']" :key="index" style="text-align: center">
                <img v-lazy="banner.url" style="max-width: 100%" @click="link(banner.link)">
            </van-swipe-item>
        </van-swipe>

        <div style="width: 100%;display: flex;flex-wrap:wrap;padding: 0 15px" v-if="ads['pos-2']">
            <div v-for="(channel, index) in ads['pos-2']" style="width: 20%;padding: 15px 10px 0px;">
                <div @click="link(channel.link)" :key="index">
                    <img v-lazy="channel.url" style="max-width: 100%;">
                </div>
            </div>
        </div>

        <van-row>
            <van-col span="24" v-if="ads['pos-3'] && ads['pos-3'].length > 0">
                <div @click="link(ads['pos-3'][0].link)" style="margin:15px 10px 0 10px;">
                    <img v-lazy="ads['pos-3'][0].url" style="width: 100%">
                </div>
            </van-col>

            <van-col span="24" v-if="ads['pos-4'] && ads['pos-4'].length >= 3">
                <div class="goodspush">
                    <!-- 首页三联广告-->
                    <div class="goodspush-mark">
                        <div class="goods-content">
                            <div class="goods-content-left"
                                 @click="link(ads['pos-4'][0].link)">
                                <img v-lazy="ads['pos-4'][0].url" style="width: 100%">
                            </div>
                            <div class="goods-content-right">
                                <div class="goods-content-top"
                                     @click="link(ads['pos-4'][1].link)">
                                    <img v-lazy="ads['pos-4'][1].url" style="width: 100%">
                                </div>
                                <div class="goods-content-bottom" style="border-left:0;"
                                     @click="link(ads['pos-4'][2].link)">
                                    <img v-lazy="ads['pos-4'][2].url" style="width: 100%">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </van-col>

        </van-row>

        <van-row v-if="ads['pos-8'] && ads['pos-8'].length>1" style="padding:0 5px;">
            <van-col span="12" style="padding: 0 5px;" @click="link(ads['pos-8'][0].link)">
                <img v-lazy="ads['pos-8'][0].url" style="width: 100%">
            </van-col>
            <van-col span="12" style="padding: 0 5px;" @click="link(ads['pos-8'][1].link)">
                <img v-lazy="ads['pos-8'][1].url" style="width: 100%">
            </van-col>
        </van-row>

        <!-- 潮流黑化-->
        <P style="font-size: 20px; font-weight: bold;padding: 20px 10px 0 10px;color: #333333;" v-if="ads['pos-5'] && ads['pos-5'].length > 0">潮流黑话</p>
        <P style="font-size: 12px;color: #cccccc;padding:  0 10px 0 10px" v-if="ads['pos-5'] && ads['pos-5'].length > 0">TREND TALK</p>

        <van-swipe :loop="true" :width="300" @change="onChange" style="padding-bottom: 10px" v-if="ads['pos-5'] && ads['pos-5'].length > 0">
            <van-swipe-item class="slide2" @click="link(channel.link)" v-for="(channel, index) in ads['pos-5']" :key="index">
                <img v-lazy="channel.url">
            </van-swipe-item>

            <div class="custom-indicator" slot="indicator" style="right: 0">
                {{ current + 1 }}/{{ads['pos-5'].length}}
            </div>
        </van-swipe>

        <!--八个广告位-->
        <div style="width: 100%; padding: 5px 10px" v-if="ads['pos-6'] && ads['pos-6'].length > 0">
            <van-row style="background-color: #ffffff;box-shadow: 0  2px  10px  0 rgba(0, 0, 0, 0.05);border-radius: 5px;overflow: hidden;">
                <van-col span="6" v-for="(v, k) in ads['pos-6']" :key="k">
                    <div style="padding:5px;display: flex;flex-direction: column;justify-content: center;align-items: center;" @click="link(v.link)">
                        <img v-lazy="v.url" style="width: 60px;">
                    </div>
                </van-col>
            </van-row>
        </div>

        <!--为你推荐-->
        <P style="font-size: 20px; font-weight: bold;padding: 10px 10px 0 10px;color: #333333;">为你推荐</p>
        <P style="font-size: 12px;color: #cccccc;padding:  0 10px 0 10px">ELABORATE SELECTION</p>
        <van-tabs color="#E86489" animated sticky swipeable @click="onClickSubTab">
            <van-tab title="男生"></van-tab>
            <van-tab title="女生"></van-tab>
            <van-tab title="球鞋"></van-tab>
            <van-tab title="美妆"></van-tab>
            <van-tab title="珠宝"></van-tab>
            <van-tab title="设计师"></van-tab>
            <van-tab title="直播"></van-tab>
        </van-tabs>
        <van-row>
            <van-col span="12" v-for="(newGood ,index) in goodsList">
                <div style="padding:3px">
                    <div
                            :key="index"
                            style=" border-radius: 5px; background-color:#fff; overflow: hidden;padding: 5px"
                    >
                        <router-link :to="{ path: `/items/detail/${newGood.id}`}">
                            <img v-lazy="newGood.picUrl" style="width: 100%;"/>
                            <p style="font-size: 12px; color: #999999; padding: 10px 0px 5px 10px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap">
                                {{newGood.name && newGood ? newGood.name : ''}}</p>
                            <div style="padding:15px 0px 0px 10px;position: relative;bottom: 10px; color:#000; font-size: 13px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap">
                                ￥{{newGood.retailPrice}}
                                <span v-show="newGood.modelPrice">+{{newGood.modelPrice}}</span>
                                <s style="color:#cccccc;float: right;position: relative;right: 1px;font-size: 12px">原价￥{{newGood.counterPrice}}</s>
                            </div>
                        </router-link>
                    </div>
                </div>
            </van-col>
        </van-row>
        <div v-if="goodsList.length == 0">
            <no-data></no-data>
        </div>
    </div>
</template>

<script>
    import {getHome, adPositionList, adAll, goodsList} from '@/api/api';
    import {
        Swipe,
        SwipeItem,
        Row,
        Col,
        Toast
    } from 'vant';
    import scrollFixed from '@/mixin/scroll-fixed';
    import NoData from '../no-data'

    export default {
        mixins: [scrollFixed],
        name: "index",
        components: {
            [Row.name]:
            Row,
            [Col.name]:
            Col,
            [Swipe.name]:
            Swipe,
            [SwipeItem.name]:
            SwipeItem,
            NoData
        },
        data() {
            return {
                isLoading: false,
                loading: false,
                finished: true,
                current: 0,
                goodsList: [],
                searchValue: '',
                isSearch: false,
                ads: {}
            };
        },

        async created() {
            this.ads = await adAll('1,2,3,4,8,5,6');
            this.initViews()
        },

        methods:{
            link(path) {
                const newPath = "http://" + path
                window.location.href = newPath
            },

            initViews() {
                this.getGoodsList('0', '男生')
            },
            getGoodsList(cates, gender){
                goodsList({
                    categoryId: cates,
                    gender: gender,
                    page: 1,
                    limit: 10
                }).then(res => {
                    this.goodsList = res.data.data.list;
                    this.loading = false;
                });
            },

            onChange(index) {
                this.current = index;
            },

            onClickSubTab(index, title){
                Toast.loading({
                    message: '加载中...',
                    forbidClick: true
                });
                switch(title){
                    case '男生':
                        this.getGoodsList('0', '男生')
                        break;
                    case '女生':
                        this.getGoodsList('0', '女生')
                        break;
                    case '球鞋':
                        this.getGoodsList('0')
                        break;
                    case '美妆':
                        this.getGoodsList('0')
                        break;
                    case '珠宝':
                        this.getGoodsList('0')
                        break;
                }
            }
        }
    }
</script>

<style lang="scss" scoped>

    /*商品*/
    .goods-list {
        width: 100%;
        /* height: 350px; */
        height: auto;
        background-color: #ffffff;
        margin-top: 10px;
        padding: 0px 10px 10px 10px;
        overflow: hidden;
        display: block;
        box-sizing: border-box;
    }

    .goods-list-title1 {
        width: 100%;
        height: 60px;
        font-size: 24px;
        color: #333333;
        line-height: 60px;
        font-weight: bold;
    }

    .goods-list-title2 {
        width: 100%;
        /* height: 20px; */
        height: auto;
        font-size: 13px;
        color: #999999;
        line-height: 20px;
    }

    .goods-list > div {
        width: 100%;
        /* height: 250px; */
        overflow: hidden;
        margin-top: 20px;
    }

    .goods-list > div > img {
        width: 100%;
    }

    .interval_bot {
        margin-bottom: 10px;
    }

    .goods-channel {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        padding-top: 20px;
        /*padding-bottom: 10px;*/
    }

    .goods-channel .item {
        width: 80px;
        height: 80px;
        /*!*margin-left: -40px;*/
        position: relative;
        left: 50%;
        border-radius: 50%;
        /*padding-top: 10px;*/
    }

    .goods-channel img {
        display: block;
        width: 50px;
        height: 50px;
        margin: 0 auto;
    }

    .goods-channel span {
        display: block;
        font-size: 12px;
        text-align: center;
        margin-top: 10px;
        margin-bottom: 10px;
        color: #333;
    }

    .van-coupon-cell--selected {
        color: #323233;
    }

    .van-coupon-list {
        height: 100%;
        position: relative;
        background-color: #f8f8f8;
    }

    .van-coupon-list__field {
        padding: 7px 15px;
    }

    .van-coupon-list__exchange {
        height: 32px;
        line-height: 30px;
    }

    .van-coupon-list__list {
        overflow-y: auto;
        padding: 15px 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-overflow-scrolling: touch;
    }

    .van-coupon-list__close {
        left: 0;
        bottom: 0;
        position: absolute;
        font-weight: 500;
    }

    .van-coupon-list__empty {
        padding-top: 100px;
        text-align: center;
    }

    .van-coupon-list__empty p {
        color: #969799;
        margin: 15px 0;
        font-size: 14px;
        line-height: 20px;
    }

    .van-coupon-list__empty img {
        width: 80px;
        height: 84px;
    }

    .van-coupon-item {
        overflow: hidden;
        border-radius: 4px;
        margin: 0 15px 15px;
        background-color: #fff;
        -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
        box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
    }

    .van-coupon-item:active {
        background-color: #e8e8e8;
    }

    .van-coupon-item__content {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        height: 100px;
        padding: 24px 0 0 15px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        border: 1px solid red;
    }

    .van-coupon-item h2,
    .van-coupon-item p {
        margin: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .van-coupon-item h2 {
        height: 34px;
        font-weight: 500;
        line-height: 34px;
    }

    .van-coupon-item p {
        font-size: 12px;
        line-height: 16px;
        color: #969799;
    }

    .van-coupon-item__head {
        min-width: 90px;
    }

    .van-coupon-item__head h2 {
        color: #f44;
        font-size: 24px;
    }

    .van-coupon-item__head h2 span {
        font-size: 50%;
    }

    .van-coupon-item__body {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        position: relative;
        border-radius: 0 4px 4px 0;
    }

    .van-coupon-item__body h2 {
        font-size: 16px;
    }

    .van-coupon-item__corner {
        top: 16px;
        right: 15px;
        position: absolute;
    }

    .van-coupon-item__corner .van-icon {
        border-color: #f44;
        background-color: #f44;
    }

    .van-coupon-item__reason {
        padding: 7px 15px;
        border-top: 1px dashed #ebedf0;
        background-color: #fafafa;
    }

    .van-coupon-item--disabled:active {
        background-color: #fff;
    }

    .van-coupon-item--disabled .van-coupon-item__content {
        height: 90px;
    }

    .van-coupon-item--disabled h2,
    .van-coupon-item--disabled p,
    .van-coupon-item--disabled span {
        color: #969799;
    }

    /*    物品推荐*/
    .goodspush {
        height: 224px;
        margin-top: 0px;
        position: relative;
    }

    .goodspush-left {
        height: 100%;
        position: absolute;
        left: 0;
        z-index: 1;
    }

    .goodspush img {
        height: 100%;
    }

    .goodspush-right {
        height: 100%;
        position: absolute;
        right: 0;
        z-index: 1;
    }

    .goodspush-mark {
        position: absolute;
        z-index: 2;
        width: 100%;
        height: 224px;
        padding: 10px;
    }

    .goods-content {
        width: 100%;
        height: 100%;
        background-color: #ffffff;
        border-radius: 10px;
        display: flex;
        overflow: hidden;
    }

    .goods-content-left {
        width: 50%;
        border-right: 1px solid #f2f2f2;
    }

    .goods-content-left > p:nth-of-type(1) {
        text-align: center;
        font-size: 15px;
        font-weight: bold;
        margin-top: 10px;
    }

    .goods-content-left > p:nth-of-type(2) {
        text-align: center;
        font-size: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #666666;
    }

    .goods-content-left > p:nth-of-type(3) {
        text-align: left;
        font-size: 15px;
        color: red;
        /*font-weight: bold;*/
        margin-top: 2px;
        padding-left: 30px;
        margin-top: 5px;
    }

    .goods-content-left s {
        font-size: 10px;
        color: #999999;
        font-weight: normal;
        text-align: right;
        padding-left: 20px;
    }

    .goods-content-right {
        width: 50%;
    }

    .goods-content-top {
        width: 100%;
        height: 100px;
        position: relative;
    }

    .goods-content-top p:nth-of-type(1) {
        width: 50%;
        font-size: 15px;
        font-weight: bold;
        position: absolute;
        left: 5px;
        top: 5px;
    }

    .goods-content-top p:nth-of-type(2) {
        width: 50%;
        font-size: 12px;
        position: absolute;
        left: 5px;
        top: 30px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        color: #666666;
    }

    .goods-content-topimg {
        width: 40%;
        height: 100%;
        position: absolute;
        right: 5px;
        top: 50%;
        margin-top: -20%;
    }

    .goods-content-bottom {
        width: 100%;
        height: 100px;
        position: relative;
        border-left: 1px solid #f2f2f2;
        border-top: 1px solid #f2f2f2;
    }

    .goods-content-bottom p:nth-of-type(1) {
        width: 50%;
        font-size: 15px;
        font-weight: bold;
        position: absolute;
        left: 5px;
        top: 5px;
    }

    .goods-content-bottom p:nth-of-type(2) {
        width: 50%;
        font-size: 12px;
        position: absolute;
        left: 5px;
        top: 30px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        color: #666666;
    }

    .goods-content-bottom img {
        height: 100%;
        position: absolute;
        right: 0;
    }

    .lrcont {
        width: 100%;
        height: 100px;
        padding: 5px;
        display: flex;
        justify-content: center;
    }

    .slide2 {
        padding: 10px;
    }

    .slide2 img {
        width: 100%;
    }

    .custom-indicator {
        position: absolute;
        bottom: 0px;
        color: #666666;
        font-size: 12px;
        padding-right: 10px;
    }

</style>
